@charset "UTF-8";
//.mdDevice(@index) when (@index > 0) {
//    @media (min-width: extract(@mdDeviceList,@index)){
//          html {
//      font-size: @baseSize / @psdWidth*extract(@mdDeviceList,@index);
//    }
//  }
//  .mdDevice(@index - 1);
//}
.size(@x,@y){
  width: @x/32rem;
  height: @y/32rem;
}
.t(@t) {
  top: @t/32rem;
}
.l(@l){
  left: @l/32rem;
}
.r(@r){
  right: @r/32rem;
}
.b(@b){
  bottom: @b/32rem;
}
.ml (@w) {
  margin-left: -@w/32rem/2;
}
.w(@w){
  width: @w/32rem;
}
.h(@h) {
  height: @h/32rem;
}
.bg (@url){
  position: absolute;
  background: url(@url) no-repeat center / 100% 100%;
}
.bgc(@url,@w){
  background: url(@url) no-repeat center center / 100% 100%;
  position: absolute;
  left: 50%;
  margin-left: -@w/2/32rem;
}
//加载中...
.loading {
    z-index: 3;
    width: 100%;
    height: 100%;
    background-color: #FFECE9;
    position: absolute;
    top: 0;
    left: 0;
  .pepole {
    position: absolute;
    .bg('../images/loading/rider1_.png');
    .size(154,121);
    .t(233);
    .r(100);
  }
  .heng {
    border: 2px solid #000;
    position: absolute;
    .size(416,20);
    background-color: #fc2e4d;
    border-radius: 20/32rem;
    .t(359);
    .r(113);
  }
  .jia {
    .size(220, 26);
    .bgc("../images/loading/loading-txt.png", 220);
    .t(426);
  }
  .waimai {
    .bgc("../images/loading/waimai-logo.png",162);
    .size(162,39);
    .b(120);
  }
  .text {
    color: #E29BA0;
    font-size: 24/32rem;
    position: absolute;
    .b(73);
    width: 100%;
    text-align: center;
  }
}
//一只送外卖的熊
.welcome {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: deepskyblue;
  position: absolute;
  .info {
    .size(397,244);
    .bgc("../images/page1/theme-title.png",397);
    .t(42);
    .hello {
      .size(75,74);
      .bg("../images/page1/hello.png");
      .t(20);
      .r(8);
    }
  }
  //熊盒
  .rider-box {
    .size(167,279);
    .b(346);
    position: absolute;
    left: 50%;
    .ml(167);
    .rider {
      .bgc("../images/page1/rider2.png",167);
      width: 100%;
      height: 100%;
    }
    .jet {
      .size(167,31);
      .bgc('../images/page1/jet1.png',167);
      bottom: 0;
    }
  }
     .clouds {
        .bg("../images/page1/clouds.png");
        .size(640,673);
        position: absolute;
        bottom: 0;
      }
    .grass {
      .size(640,396);
      bottom: 0;
      .bg("../images/page1/grass1.png");
    }
  .trees {
    .size(599,71);
    .bg('../images/page1/trees.png');
    .b(352);
  }
  .grass2 {
    .size(640,228);
    .bg('../images/page1/grass2.png');
    bottom: 0;
  }
  .start {
    .size(208,208);
    .bgc('../images/page1/circle1.png',208);
    .b(86);
    display: flex;
    justify-content: center;
    align-items: center;
    .bear-aft {
      .size(124,113);
      .bgc("../images/page1/bear-btn-aft.png",124);
    }
    .circle2 {
      width: 100%;
      height: 100%;
      left: 0;
      .bg("../images/page1/circle2.png");
    }
  }
  .text {
    color: #6D7F22;
    position: absolute;
    .h(32);
    .b(38);
    left: 50%;
    margin-left: -29%;
  }
}
.swiper-container {
  width: 100%;
  height: 100%;
}
//第一页
.page1 {
  background-color: #be8651;
 .info {
   position: absolute;
   .l(32);
   .t(32);
   color: white;
   padding-left: 15rem/32;
   h2 {
     font-size: 64/32rem;
     padding: 0;
     margin: 0;
   }
   p {
     padding-top: 6rem/32;
     margin: 0;
     font-size: 12px;
   }
   span {
     background-color: white;
     .w(5);
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
   }
 }
  //第一页的第一页背景图
  .page1_1 {
    .page1_1_bgc {
      .size(576,573);
      .bgc("../images/page2/bg1.png",576);
      .b(252);
    }
    .front1 {
      .size(439,349);
      .bgc('../images/page2/front1.png',439);
      .b(290);
      z-index: 1;
    }
    .tex {
      .size(363,119);
      .bgc("../images/page2/txt-bubbl.png",363);
      .b(140);
      z-index: 1;
      display: flex;
      align-items: center;
      .work {
        .size(250,31);
        .bgc("../images/page2/txt-work.png",250);
      }
    }

  }
  //第一页的第二张背景图
  .page1_2 {
    .page1_1_bgc {
      .size(582,520);
      .bgc("../images/page2/bg2.png",582);
      .b(252);
    }
    .front1 {
      .size(436,332);
      .bgc("../images/page2/relax.png",436);
      .b(310);
      z-index: 1;
    }
    .tex {
      .size(363,119);
      .bgc("../images/page2/txt-bubbl.png",363);
      .b(140);
      z-index: 1;
      display: flex;
      align-items: center;
      .work {
        .size(250,31);
        .bgc("../images/page2/txt-life.png",250);
      }
    }
  }
  //第一页的第三页
  .page1_3 {
    .page1_3_bg {
      .size(561,516);
      .b(270);
      .bgc("../images/page2/bg3.png",561);
    }
    .person {
      .size(503,229);
      .bgc("../images/page2/person.png",503);
      .b(300);
      z-index: 1;
      .word1 {
        .size(92,83);
        .bg("../images/page2/word1.png");
        .l(7);
        .b(194);
      }
      .word2 {
        .size(77,70);
        .bg("../images/page2/word2.png");
        .l(115);
        .b(245);
      }
      .word3 {
        .size(115,104);
        .bg("../images/page2/word3.png");
        .r(130);
        .b(220);
      }
      .word4 {
        .size(79,73);
        .bg("../images/page2/word4.png");
        .r(12);
        .b(230);
      }
    }
    .tex {
      .size(363,119);
      .bgc("../images/page2/txt-bubbl.png",363);
      .b(140);
      z-index: 1;
      display: flex;
      align-items: center;
      .work {
        .size(250,31);
        .bgc("../images/page2/txt-res.png",250);
        z-index: 1;
      }
    }

  }
  .sphere {
  .size(640,356);
    bottom: 0;
    .bg("../images/page2/sphere1.png");
  }
  .bear1 {
    .size(178,134);
    .bg("../images/page2/bear1.png");
    .r(38);
    bottom: 0;
  }

}
//第二页
.page2 {
  background-color: #ee4143;
  .info {
    position: absolute;
    .l(32);
    .t(32);
    color: white;
    padding-left: 15rem/32;
    h2 {
      font-size: 64/32rem;
      padding: 0;
      margin: 0;
    }
    p {
      padding-top: 6rem/32;
      margin: 0;
      font-size: 12px;
      &:nth-of-type(2) {
        padding-top:0;
      }
    }
    span {
      background-color: white;
      .w(5);
      height: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
  .sphere {
    .size(640,356);
    bottom: 0;
    .bg("../images/page3/sphere2.png");
  }
  .bg {
    .bg4 {
      .size(592,490);
      .bgc("../images/page3/bg4_.png",592);
      .b(313);
    }
    .table {
      z-index: 1;
      .b(140);
      .bgc("../images/page3/table.png",514);
      .size(514,258);
    }
    .foods {
      z-index: 1;
      .size(354,152);
      .b(330);
      .bgc("../images/page3/foods.png",354);
    }
    .bear2 {
      .size(227,336);
      background-image: url("../images/page3/bear2.png");
      background-repeat: no-repeat;
      background-size: 368rem/32 429rem/32;
      background-position: -103rem/32 -96rem/32;
      .b(310);
      position: absolute;
      left: 50%;
      .ml(227);
      z-index: 1;
      .left {
        .size(74,77);
        .bg("../images/page3/hand-left_.png");
        .t(180);
        .l(30);
      }
      .right {
        .size(74,77);
        .bg("../images/page3/hand-right.png");
        .t(180);
        .r(35);
      }
      .tu_left {
        .size(102,102);
        .bg("../images/page3/face1.png");
        top: 0;
        .l(-102);
      }
      .tu_right {
        .size(101,102);
        .bg("../images/page3/face2.png");
        .t(-102);
        .r(-101);
      }
    }
  }

}
//第三页
.page3 {
  background-color: #dd8a03;
  .info {
    position: absolute;
    .l(32);
    .t(32);
    color: white;
    padding-left: 15rem/32;
    h2 {
      font-size: 64/32rem;
      padding: 0;
      margin: 0;
    }
    p {
      padding-top: 6rem/32;
      margin: 0;
      font-size: 12px;
      &:nth-of-type(2) {
        padding-top:0;
      }
    }
    span {
      background-color: white;
      .w(5);
      height: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
  .sphere {
    .size(640,356);
    bottom: 0;
    .bg("../images/page4/sphere3.png");
  }
  .bg {
    .bg4 {
      .size(592, 580);
      .bgc("../images/page4/bg5.png", 592);
      .b(300);
    }
    .bear2 {
      .di1 {
        .size(197,140);
        .bg("../images/page4/license.png");
        .l(40);
        .b(500);
      }
      .di2 {
        .size(205,107);
        .bg("../images/page4/oil.png");
        .l(225);
        .b(660);
      }
      .di3 {
        .size(198,163);
        .bg("../images/page4/evil2.png");
        .r(30);
        .b(480);
      }
    }
    .bear3 {
      .size(206,321);
      .bgc("../images/page4/bear3.png",206);
      .b(159);
      z-index: 1;
    }
    .page3_bg {
      .size(592,580);
      .bgc("../images/page4/bg5.png",592);
      .b(300);
    }
  }
}
.page4 {
  background-color: #3fa100;
  .info {
    position: absolute;
    .l(32);
    .t(32);
    color: white;
    padding-left: 15rem/32;
    h2 {
      font-size: 64/32rem;
      padding: 0;
      margin: 0;
    }
    p {
      padding-top: 6rem/32;
      margin: 0;
      font-size: 12px;
      &:nth-of-type(2) {
        padding-top:0;
      }
    }
    span {
      background-color: white;
      .w(5);
      height: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
  .sphere {
    .size(640,356);
    bottom: 0;
    .bg("../images/page5/sphere4.png");
  }
  .page3_bg {
    .size(588,333);
    .bgc("../images/page5/bg6.png",588);
    .b(300);
  }
  //熊
  .bear4 {
    .size(309,325);
    .b(170);
    .bgc("../images/page5/bear4.png",309);
  }
  .card1 {
    .size(160,175);
    .l(32);
    .b(435);
    .bg("../images/page5/card1.png");
  }
  .card2 {
    .size(161,209);
    .b(530);
    .bgc("../images/page5/card2.png",161);
  }
  .card3 {
    .size(167,184);
    .r(45);
    .bg("../images/page5/card3.png");
    .b(420);
  }
}
//第五页
.page5 {
  background-color: #0098cf;
  .info {
    position: absolute;
    .l(32);
    .t(32);
    color: white;
    padding-left: 15rem/32;
    h2 {
      font-size: 64/32rem;
      padding: 0;
      margin: 0;
    }
    p {
      padding-top: 6rem/32;
      margin: 0;
      font-size: 12px;
      &:nth-of-type(2) {
        padding-top:0;
      }
    }
    span {
      background-color: white;
      .w(5);
      height: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
  .sphere {
    .size(640,356);
    bottom: 0;
    .bg("../images/page6/sphere5.png");
  }
  .page3_bg {
    .size(594,493);
    .bgc("../images/page6/bg7.png",594);
    .b(300);
  }
  //熊
  .qi {
    .size(230,390);
    .b(175);
    position: absolute;
    left: 50%;
    .ml(230);
    .bear4 {
      width: 100%;
      height: 100%;
      .bgc("../images/page6/rider2.png",230);
    }
    .shadow {
      .size(114,26);
      bottom: 0;
      .bgc("../images/page6/shadow.png",114);
    }
  }
  .weather {
    .size(432,160);
    .bgc("../images/page6/weather-cloud.png",432);
    .b(645);
  }
}
//第六页
.page6 {
  background-color: #b527a0;
  .info {
    position: absolute;
    .l(32);
    .t(32);
    color: white;
    padding-left: 15rem/32;
    h2 {
      font-size: 64/32rem;
      padding: 0;
      margin: 0;
    }
    p {
      padding-top: 6rem/32;
      margin: 0;
      font-size: 12px;
    }
    span {
      background-color: white;
      .w(5);
      height: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
  .sphere {
    .size(640,356);
    bottom: 0;
    .bg("../images/page7/sphere6.png");
  }
  .page3_bg {
    .size(588,333);
    .bgc("../images/page7/bg8.png",588);
    .b(300);
  }
  //熊
    .bear4 {
      .size(285,328);
      .b(200);
      .bgc("../images/page7/bear5.png",285);
      .foods-box {
        position: absolute;
        .t(10);
        .l(140);
        div:nth-child(1) {
          .size(35,29);
          transform: rotateZ(29deg) translateY(240rem/32);
          .bgc("../images/page7/gift1.png",35);
        }
        div:nth-child(2) {
          .size(93,79);
          transform: rotateZ(29deg*2) translateY(240rem/32);
          .bgc("../images/page7/gift2.png",93);
        }
        div:nth-child(3) {
          .size(72,64);
          transform: rotateZ(29deg*3) translateY(240rem/32);
          .bgc("../images/page7/gift3.png",72);
        }
        div:nth-child(4) {
          .size(91,73);
          transform: rotateZ(29deg*4) translateY(240rem/32);
          .bgc("../images/page7/gift4.png",91);
        }
        div:nth-child(5) {
          .size(99,65);
          transform: rotateZ(29deg*5) translateY(240rem/32);
          .bgc("../images/page7/gift5.png",99);
        }
        div:nth-child(6) {
          .size(107,80);
          transform: rotateZ(29deg*5) translateY(240rem/32);
          .bgc("../images/page7/gift6.png",107);
        }
        div:nth-child(7) {
          .size(107,80);
          .bgc("../images/page7/gift7.png",107);
          transform: rotateZ(29deg*7) translateY(240rem/32);
        }
        div:nth-child(8) {
          .size(88,61);
          transform: rotateZ(29deg*8) translateY(240rem/32);
          .bgc("../images/page7/gift8.png",88);
        }
        div:nth-child(9) {
          .size(78,85);
          transform: rotateZ(29deg*9) translateY(240rem/32);
          .bgc("../images/page7/gift9.png",78);
        }
        div:nth-child(10) {
          .size(49,37);transform: rotateZ(29deg*10) translateY(240rem/32);
          .bgc("../images/page7/gift10.png",49);
        }
        div:nth-child(11) {
          .size(51,37);
          transform: rotateZ(29deg*11) translateY(240rem/32);
          .bgc("../images/page7/gift11.png",51);
        }
        div:nth-child(12) {
          .size(37,23);
          .bgc("../images/page7/gift12.png",37);
          transform: rotateZ(29deg*12-10) translateY(240rem/32);
        }

      }
    }
}
//第七页
.page7 {
  background-color: #19072a;
  .info {
    position: absolute;
    .l(32);
    .t(32);
    color: white;
    padding-left: 15rem/32;
    h2 {
      font-size: 64/32rem;
      padding: 0;
      margin: 0;
    }
    p {
      padding-top: 6rem/32;
      margin: 0;
      font-size: 12px;
      &:nth-of-type(2) {
        padding-top:0;
      }
    }
    span {
      background-color: white;
      .w(5);
      height: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
  .sphere {
    .size(640,380);
    bottom: 0;
    .bg("../images/page8/sphere7.png");
  }
  //熊
  .bear4 {
    .size(276,271);
    .b(280);
    .l(240);
    .bg("../images/page8/bear6.png");
  }
    .street {
      .size(80,443);
      .b(300);
      .l(240);
      .bg("../images/page8/streetlight.png");
      .light {
        .t(10);
        .l(-140);
        .size(437,427);
        .bg("../images/page8/lamplight.png");
      }
    }
  .moto {
    .size(200,137);
    .bg("../images/page8/moto.png");
    .l(125);
    .b(335);
  }
  .share {
    .size(379,113);
    .b(140);
    .bgc("../images/page8/share.png",379);
  }
  .text {
    color: #b579d6;
    font-size: 24rem/32;
    width: 100%;
    text-align: center;
    .b(70);
    position: absolute;
  }
}

//添加动画效果
//第一页动画效果
//进度条动画
@keyframes progress {
  from{}
  to{
    width: 100%;
  }
}
//熊动画
@keyframes bear {
  from{}
  10%{
    transform: translate(-26rem/32,20rem/32) ;
  }
  20%{
    transform: translate(-26rem/32*2,-20rem/32) ;
  }
  30%{
    transform: translate(-26rem/32*3,20rem/32) ;
  }
  40%{
    transform: translate(-26rem/32*4,-20rem/32) ;
  }
  50%{
    transform: translate(-26rem/32*5,20rem/32) ;
  }
  60%{
     transform: translate(-26rem/32*6,-20rem/32) ;
   }
  70%{
    transform: translate(-26rem/32*7,20rem/32);
  }
  80%{
    transform: translate(-26rem/32*8,-20rem/32);
  }
  90%{
    transform: translate(-26rem/32*9,20rem/32);
  }
  100%{
    transform: translate(-26rem/32*10,-10rem/32);
  }
}
.loading.animation {
  .heng {
    background-color: transparent;
  }
  .progress {
    width: 20%;
    height: 100%;
    background-color: #fc2e4d;
    position: absolute;
    right: 0;
    animation: progress 1s  linear forwards;
  }
  .pepole {
    animation: bear 1s linear forwards;
  }
}
//第二张动画效果
//地动画
@keyframes grass {
  from{}
  to{
    .h(396);
  }
}
//草动画
@keyframes grass2 {
  from{

  }
  to{
    transform: none;
    opacity: 1;
  }
}
//树动画
@keyframes trees {
    from{
      transform: translateY(-20rem/32);
      opacity: 0;
     }
  50% {
    transform: translateY(20rem/32);
    opacity: 1;
  }
   to {
    transform: none;
     opacity: 1;
  }
}
//开启按钮动画
@keyframes start {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
//运动动画
@keyframes circle2 {
  from{}
  to{
    transform: rotate(360deg);
  }
}
//熊盒子动画下落
@keyframes riderBoxDown {
  from {
    transform: translateY(-50%);
  }
  to {
    opacity: 1;
  }
}
//熊上下动
@keyframes bearDown {
  from{
    transform: translateY(-10%);
    opacity: 1;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
//熊盒子动画下落隐藏不见
@keyframes riderBoxDownup {
  from {
    opacity: 1;
  }
  to {
    transform: scale(2,2);
    transform: translateY(100%);
    opacity: 0;
  }
}
//烟雾左右
@keyframes jetzuoyou {
  from {
    transform: scale(0,0);
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.welcome {
  .grass {
    .h(100);
  }
  .grass2 {
    opacity: 0;
    transform: scale(2,2);
  }
  .trees {
    opacity: 0;
  }
  .start {
    opacity: 0;
  }
  .rider-box {
    opacity: 0;
  }
  .jet {
    opacity: 0;
  }
  .info,.hello {
    opacity: 0;
  }
}
.welcome.animation {
  .grass {
    animation: grass .5s linear forwards;
  }
  .grass2 {
    animation: grass2 .5s .5s linear forwards;
  }
  .trees {
    animation: trees .5s 1s linear forwards;
  }
  .start {
    animation: start .5s linear forwards;
    .circle2 {
      animation: circle2 1s linear infinite;
    }
  }
  .rider-box {
    animation: riderBoxDown .5s 1.5s linear forwards;
    .rider {
      animation: bearDown .5s 2s normal infinite;
    }
    .jet {
      animation: jetzuoyou .5s 2s linear infinite;
    }
  }
  .info {
    animation: riderBoxDown .5s 2s linear forwards;
    .hello {
      animation: jetzuoyou .5s 2.5s linear forwards;
    }
  }
}
//又向左移动
@keyframes right2left {
  from {
    transform: translateX(80%);
  }
  to {
    transform: none;
    opacity: 1;
  }
}
//高度上向下
@keyframes top2Bottom {
  from {

  }
  to {
    height: 100%;
  }
}
//右向左旋转
@keyframes xuanzhuan {
  0% {
    transform: rotateZ(90deg);
  }
  25% {
    transform: rotateZ(-5deg);
    opacity: 1;
  }
  30% {
    transform: rotateZ(0);
    opacity: 1;
  }
  65% {
    transform: rotateZ(0);
    opacity: 1;
  }
  70% {
    transform: rotateZ(5deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-90deg);
    opacity: 1;
  }
}
//右向左旋转，在0deg停止
@keyframes xuanzhuanti {
  0% {
    transform: rotateZ(90deg);
    opacity: 0;
  }
  35% {
    transform: rotateZ(-4deg);
    opacity: 1;
  }
  55% {
    transform: rotateZ(0);
    opacity: 1;
  }
  65% {
    transform: rotateZ(0);
    opacity: 1;
  }
  70% {
    transform: rotateZ(5deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(0);
    opacity: 1;
  }
}
//上下左右抖动
@keyframes doudong {
  0% {
    opacity: 1;
    transform: translate(0,-5px);
  }
  35% {
    transform: translate(0,5px);
    opacity: 1;
  }
  55%{
    transform: translate(5px,0);
    opacity: 1;
  }
  85% {
    transform: translate(-5px,0);
    opacity: 1;
  }
  100% {
    transform: translate(5px,-5px);
    opacity: 1;
  }
}
//第一页的动画
.page1.animation {
  .page1_1  {
    .page1_1_bgc {
      animation: xuanzhuan 1.5s  linear;
    }
    .front1 {
      animation: xuanzhuan 1.5s .2s linear;
    }
    .tex {
      animation: xuanzhuan 1s .5s linear;
    }
  }
  .page1_2 {
    .page1_1_bgc {
      animation: xuanzhuan 1.5s 1.7s linear;
    }
    .front1 {
      animation: xuanzhuan 1.5s 2s linear;
    }
    .tex {
      animation: xuanzhuan 1s 2.3s linear;
    }
  }
  .page1_3 {
    .person {
      animation: xuanzhuanti 1.5s 3.8s linear forwards;
      .word1,.word2,.word3,.word4 {
        animation: doudong 1s linear infinite;
      }
    }
    .tex {
      animation: xuanzhuanti 1s 4.1s linear forwards;
    }
  }
}

.swiper-slide.animation{
.info {
  h2, p {
    animation: right2left 1s linear forwards;
  }
  span {
    animation: top2Bottom 1s linear forwards;
  }
}
}
.swiper-slide {
  .info{
    span {
    height: 20%;
   }
  }
}
//第一页的初始化
.page1 {
  overflow: hidden;
.info {
  h2, p {
    opacity: 0;
  }
  span {
    height: 0% !important;
    opacity: 1;
  }
}
  .page1_1{
    .page1_1_bgc,front1 {
      transform-origin: 50% 200% !important;
      opacity: 0;
    }
    .front1 {
      opacity: 0;
      transform-origin: 50% 200% ;
    }
    .tex {
      opacity: 0;
      transform-origin: right bottom;
    }
  }
  .page1_2 {
    .page1_1_bgc{
      transform-origin: 50% 200% ;
      opacity: 0;
    }
    .front1 {
      opacity: 0;
      transform-origin: 50% 200% ;
    }
    .tex {
      opacity: 0;
      transform-origin: right bottom;
    }
  }
  .page1_3 {
    .person {
      opacity: 0;
      transform-origin: 50% 200% ;
      .word1,.word2,.word3,.word4 {
        opacity: 0;
      }
    }
    .tex {
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both;
      opacity: 0;
      transform-origin: right bottom;
    }
  }
}
//从下往上
@keyframes beardown2up  {
  from{
    transform: translateY(60%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
//熊的左右手
@keyframes shoudong {
  from {
    transform: rotateZ(10deg);
  }
  to {
    transform: rotateZ(-10deg);
  }
}
//表情包小变大，大变小
@keyframes bearbiao {
  from {
    transform: scale(0,0);
  }
  50% {
    transform: scale(1.2,1.2);
    opacity: 1;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
//第二页动画
.page2.animation {
  .bg4 {
    animation: xuanzhuanti 1s  linear forwards;
  }
  .table {
    animation: riderBoxDown 1s 1s linear forwards;
  }
  .bear2 {
    animation: beardown2up .5s 2.1s linear forwards;
  }
  .left,.right {
    animation: shoudong 1s linear infinite;
  }
  .foods {
    animation: riderBoxDown .5s 2.8s linear forwards;
  }
  .tu_left,.tu_right {
    animation: bearbiao 1s 3s linear forwards;
  }
}
//第二页的初始化
.page2 {
  .bg {
    .bg4 {
      opacity: 0;
      transform-origin: 50% 200%;
    }
    .table {
      opacity: 0;
    }
    .foods {
      opacity: 0;
    }
    .bear2 {
      opacity: 0;
      .tu_left,.tu_right {
        opacity: 0;
      }
      .left {
        transform-origin: left top;
      }
      .right {
        transform-origin: right top;
      }
    }
  }
}
//第三页动画
.page3.animation {
  .page3_bg {
    animation: xuanzhuanti 1s linear forwards;
  }
  .bear3 {
    animation: riderBoxDown .7s .5s linear forwards;
  }
  .bear2 {
    .di1 {
      animation: bearbiao 1s .7s linear forwards,doudong 1s .7s linear infinite;
    }
    .di2 {
      animation: bearbiao 1s .7s linear forwards,doudong 1s .7s linear infinite;
    }
    .di3 {
      animation: bearbiao 1s .7s linear forwards,doudong 1s .7s linear infinite;
    }
  }
}
//第三页初始化
.page3 {
  .page3_bg {
    opacity: 0;
    transform-origin: 50% 200%;
  }
  .bear3 {
    opacity: 0;
  }
  .di1,.di2,.di3 {
    opacity: 0;
  }
}
//为动画添加图片
.page3.animation {
  .bear-box {
  .bear-box-1 {
    opacity: 0;
    .size(251, 335);
    .b(159);
    z-index: 1;
    .bgc("../images/page4/bear3-1-1.png", 251);
    }
    .bear-box-2 {
      .size(215, 313);
      opacity: 0;
      .b(159);
      z-index: 1;
      .bgc("../images/page4/bear3-2-1.1.png", 215);
    }
    .bear-box-3 {
      .size(290, 351);
      opacity: 0;
      .b(159);
      z-index: 1;
      .bgc("../images/page4/bear3-3-1.png", 290);
    }
  }
  .di1-box {
    .di1-box-1 {
      opacity: 0;
      .l(40);
      .b(500);
      .size(228,151);
      .bg("../images/page4/license1.png");
    }
    .di1-box-2 {
      opacity: 0;
      .size(231,156);
      .bg("../images/page4/oil1.png");
      .l(225);
      .b(660);
    }
    .di1-box-3 {
      .size(211,173);
      opacity: 0;
      .bg("../images/page4/evil21.png");
      .r(30);
      .b(480);
    }
  }
}
//第四张动画
.page4.animation {
  .page3_bg {
    animation: xuanzhuanti 1s linear forwards;
  }
  .bear4 {
    animation: riderBoxDown .7s .5s linear forwards;
  }
  .card1,.card2,.card3 {
  animation: bearbiao 1s 1.2s linear forwards;
  }
}
//第四张初始化
.page4 {
  .page3_bg {
    transform-origin: 50% 200%;
  }
  .page3_bg,.bear4,.card1,.card2,.card3 {
    opacity: 0;
  }
}
@keyframes leftDown {
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100%{
    opacity: 1;
    transform: translate(-10px,200px);
  }
}
@keyframes rightDown {
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100%{
    opacity: 1;
    transform: translate(20px,200px);
  }
}
//第五张动画
.page5.animation {
  .page3_bg {
    animation: xuanzhuanti 1s linear forwards;
  }
  .weather {
    animation: bearbiao 1s  linear forwards,doudong .8s .3s linear infinite;
    div:nth-child(odd) {
      animation: leftDown 1s .8s linear infinite;
    }
    div:nth-child(even) {
      animation: rightDown 1s 1s linear infinite;
    }
  }
  .qi {
    animation: riderBoxDown .7s .6s linear forwards;
    .bear4 {
      animation: bearDown .5s 1s normal infinite;
    }
    .shadow {
      animation: jetzuoyou .5s 1s linear infinite;
    }
  }
}
//第五张初始化
.page5 {
  .page3_bg {
    transform-origin: 50% 200%;
  }
  .weather {
    opacity: 0;
    div{
       opacity: 0;
        .size(32,32);
        .bg("../images/page6/snow-piece.png");
        bottom: 0;
    }
    div:nth-child(1) {
      .l(20);
    }
    div:nth-child(2) {
      .l(40);
    }
    div:nth-child(3) {
      .l(60);
    }
    div:nth-child(4) {
      .l(80);
    }
    div:nth-child(5) {
      .l(100);
    }
    div:nth-child(6) {
      .l(120);
    }
    div:nth-child(7) {
      .l(150);
    }
    div:nth-child(8) {
      .l(180);
    }
    div:nth-child(9) {
      .l(200);
    }
    div:nth-child(10) {
      .l(220);
    }
  }
  .qi {
    opacity: 0;
    .bear4,.shadow {
      opacity: 0;
    }
  }
}
@keyframes zuo2youlai {
  from {
    transform: none;
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes rotate {
  from {}
  to {
    transform: rotateZ(360deg);
  }
}
//第六张动画
.page6.animation {
  .page3_bg {
    animation: xuanzhuanti 1s linear forwards;
  }
  .bear4 {
    animation: riderBoxDown .7s .5s linear forwards;
  }
  .foods-box {
    div:nth-child(1) {
      animation: zuo2youlai 1s 1.2s linear infinite;
    }
    div:nth-child(2) {
      animation: zuo2youlai 1s 1.4s linear infinite;
    }
    div:nth-child(3) {
      animation: zuo2youlai 1s 1.6s linear infinite;
    }
    div:nth-child(4) {
      animation: zuo2youlai 1s 1.8s linear infinite;
    }
    div:nth-child(5) {
      animation: zuo2youlai 1s 2s linear infinite;
    }
    div:nth-child(6) {
      animation: zuo2youlai 1s 2.2s linear infinite;
    }
    div:nth-child(7) {
      animation: zuo2youlai 1s 2.4s linear infinite;
    }
    div:nth-child(8) {
      animation: zuo2youlai 1s 2.6s linear infinite;
    }
    div:nth-child(9) {
      animation: zuo2youlai 1s 2.8s linear infinite;
    }
    div:nth-child(10) {
      animation: zuo2youlai 1s 3s linear infinite;
    }
    div:nth-child(11) {
      animation: zuo2youlai 1s 3.2s linear infinite;
    }
    div:nth-child(12) {
      animation: zuo2youlai 1s 3.4s linear infinite;
    }
  }
}
//第六张初始化
.page6 {
  .page3_bg {
    transform-origin: 50% 200%;
    opacity: 0;
  }
  .bear4 {
    opacity: 0;
  }
  .foods-box {
    //opacity: 0;
    div {
      transform: none;
      opacity: 0;
    }
    div>div {
      opacity: 0;
    }
  }
}
//音乐设置
.mymusic {
  .size(36,36);
  .bg("../images/pause.png");
  z-index: 999;
  .t(32);
  .r(32);
}